<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">详情</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="6">
                    销售申请单号：<span>{{orderInfo.sellerCarInApply.id}}</span>
                </el-col>
                <el-col :span="6">
                    状态：<span v-if="orderInfo.sellerCarInApply.status">{{exportOrderState[orderInfo.sellerCarInApply.status].label}}</span>
                </el-col>
            </el-row>

            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">明细</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="6">
                    保证金金额：<span>{{orderInfo.sellerCarInApply.deposit}}元</span>
                </el-col>
            </el-row>
        </c-template>

        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">车辆基本信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.sellerBill" v-loading="loading">
                        <el-table-column width="" label="费用名称" align="center">
                            <template slot-scope="scope">
                                {{scope.row.type == null ? "" : billStatus[scope.row.type].label}}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="金额（元）" align="center" prop="amount" />
                        <el-table-column width="" label="状态" align="center">
                            <template slot-scope="scope">
                                {{scope.row.status == null ? "" : payStatus[scope.row.status].label }}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="付款凭证" align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="handleOpenFile(scope.row.payProofUrl)" v-if="scope.row.payProofUrl" :underline="false">查看</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </c-template>

        <el-row :gutter="24" type="flex" justify="end" v-if="!orderInfo.sellerCarInApply.isDepositPaid">
            <el-col :span="24" class="flex-x-end">
                <el-button type="primary" @click="handleApprove(true)">确认支付</el-button>
                <el-button type="default" @click="handleApprove(false)">未支付</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { exportOrderState, billStatus, marginStatus } from "@/utils/status.js";
export default {
    components: {
    },
    data () {
        return {
            loading: false,
            id: "",
            isView: true,
            exportOrderState: exportOrderState,
            billStatus: billStatus,
            payStatus: marginStatus,
            orderInfo: {
                sellerCarInApply: {},
                creditAmount: {},
                carList: []
            },
        };
    },
    mounted () {
        this.getInfo()
    },
    methods: {
        handleApprove (flag) {

            this.$confirm("是否确认该审批结果?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                let depositId = ""
                this.orderInfo.sellerBill.forEach((item) => {
                    if (item.type == 1) {
                        depositId = item.id
                    }
                })
                let data = {
                    id: depositId,
                    flag: flag,
                };
                this.$post({
                    url: "/sellerBill/depositConfirm",
                    data,
                }).then(
                    () => {
                        this.$message.success("审批成功");
                        this.loading = false;
                        this.getInfo()
                    },
                    () => {
                        this.loading = false;
                    }
                );
            })
        },
        handleOpenFile (filePath) {
            if (filePath) {
                window.open(filePath);
            } else {
                this.$message.warning("服务器地址不存在");
            }
        },
        async getInfo () {
            if (this.$route.query.id) {
                this.isView = eval(this.$route.query.isView)
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/sellerCarInApply/getById", params })
                this.orderInfo = res

                this.loading = false;
            }
        },
    },
};
</script>